<template>
    <!-- 推荐同级子路由    关注 -->
    <div>
        <div class="attentionContainer">
            <div class="title">
                <span>推荐关注</span>
                <span class="right" @click="recommendStore.getAttentionList"><svg t="1666161069954" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2720" width="14" height="14">
                        <path
                            d="M684.032 403.456q-17.408-8.192-15.872-22.016t11.776-22.016q3.072-2.048 19.968-15.872t41.472-33.28q-43.008-49.152-102.4-77.312t-129.024-28.16q-64.512 0-120.832 24.064t-98.304 66.048-66.048 98.304-24.064 120.832q0 63.488 24.064 119.808t66.048 98.304 98.304 66.048 120.832 24.064q53.248 0 100.864-16.896t87.04-47.616 67.584-72.192 41.472-90.624q7.168-23.552 26.624-38.912t46.08-15.36q31.744 0 53.76 22.528t22.016 53.248q0 14.336-5.12 27.648-21.504 71.68-63.488 132.096t-99.84 103.936-128.512 68.096-148.48 24.576q-95.232 0-179.2-35.84t-145.92-98.304-98.304-145.92-36.352-178.688 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352q105.472 0 195.584 43.52t153.6 118.272q23.552-17.408 39.424-30.208t19.968-15.872q6.144-5.12 13.312-7.68t13.312 0 10.752 10.752 6.656 24.576q1.024 9.216 2.048 31.232t2.048 51.2 1.024 60.416-1.024 58.88q-1.024 34.816-16.384 50.176-8.192 8.192-24.576 9.216t-34.816-3.072q-27.648-6.144-60.928-13.312t-63.488-14.848-53.248-14.336-29.184-9.728z"
                            p-id="2721" fill="#b1b1b1"></path>
                    </svg>换一批</span>
            </div>
            <div class="list">
                <el-row :gutter="10">
                    <el-col :span="3" v-for="(item,index) in recommendStore.attention.videoList" :key="item.id">
                        <div class="card">
                            <a href="#"><img :src="item.avatar" alt=""></a>
                            <div class="text">{{item.account}}</div>
                            <div class="button">
                                <svg t="1666162449689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3769" width="14" height="14"><path d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z" p-id="3770" fill="#f93684"></path></svg>
                                关注
                            </div>
                        </div>
                    </el-col>

                    
                </el-row>
            </div>
           <div class="footer">
            <div class="imgContainer">
                <div class="mask"  v-loading="recommendStore.loading" element-loading-text="正在加载中..." element-loading-background="#f5f7f9"></div>
                <img src="@/assets/images/follow_empty@3x.09121649.png" alt="">
                <p>暂无内容</p>
            </div>
           </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter,useRoute } from "vue-router"
import { reactive, ref, onMounted } from 'vue'
import useRecommendStore from "@/stores/recommend";
const recommendStore = useRecommendStore();
const router = useRouter();
const route = useRoute();


onMounted(()=>{
    recommendStore.getAttentionList();
    
})

</script>

<style scoped>
.attentionContainer {
    width: 1200px;
    margin: 0 auto;
    cursor:pointer;
}

.attentionContainer .title {
    margin-top: 10px;
    color: #b1b1b1;
    font-size: 14px;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
}

.attentionContainer .title .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 64px;
}
.attentionContainer .list .card{
    background-color: #fff;
    width: 142px;
    height: 160px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

}
.attentionContainer .list .card img{
    border-radius: 50%;
    width: 60px;
    height: 60px;


}
.attentionContainer .list .card .text{
    color: #7d8090;
    font-size: 14px;
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 14px;
    margin-top: -4px;
    text-align: center;
}
.attentionContainer .list .card .button{
    box-sizing: border-box;
    font-size: 12px;
    height: 35px;
    width: 70px;
    color: #f93684;
    background-color: #f9ebf1;
    border-radius: 20px;
    font-size: 12px;
    justify-content: center;
    border: 1px solid #f9ebf1;
    display: flex;
    align-items: center;
}
.attentionContainer .list .card .button svg{
    margin-right: 5px;
}

.attentionContainer .footer .imgContainer{
    height: 350px;
    width: 100%;
    padding:120px 0 130px 0;
    margin: 20px 0 160px 0;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    
}
.attentionContainer .footer .imgContainer img{
    width: 312px;
    height: 244px;
}


.attentionContainer .footer .imgContainer p{
    color: rgb(177, 181, 193);
    font-size: 14px;
    margin-top: 17px;

}




</style>